GFM

# Fenced code blocks

A code fence (opens new window) is a sequence of at least three consecutive backtick characters (`) or tildes (~). (Tildes and backticks cannot be mixed.) A fenced code block (opens new window) begins with a code fence, indented no more than three spaces.

The line with the opening code fence may optionally contain some text following the code fence; this is trimmed of leading and trailing whitespace and called the info string (opens new window). The info string (opens new window) may not contain any backtick characters. (The reason for this restriction is that otherwise some inline code would be incorrectly interpreted as the beginning of a fenced code block.)

The content of the code block consists of all subsequent lines, until a closing code fence (opens new window) of the same type as the code block began with (backticks or tildes), and with at least as many backticks or tildes as the opening code fence. If the leading code fence is indented N spaces, then up to N spaces of indentation are removed from each line of the content (if present). (If a content line is not indented, it is preserved unchanged. If it is indented less than N spaces, all of the indentation is removed.)

The closing code fence may be indented up to three spaces, and may be followed only by spaces, which are ignored. If the end of the containing block (or document) is reached and no closing code fence has been found, the code block contains all of the lines after the opening code fence until the end of the containing block (or document). (An alternative spec would require backtracking in the event that a closing code fence is not found. But this makes parsing much less efficient, and there seems to be no real down side to the behavior described here.)

A fenced code block may interrupt a paragraph, and does not require a blank line either before or after.

The content of a code fence is treated as literal text, not parsed as inlines. The first word of the info string (opens new window) is typically used to specify the language of the code sample, and rendered in the class attribute of the codetag. However, this spec does not mandate any particular treatment of the info string (opens new window).

Here is a simple example with backticks:

Example 89

Markdown HTML Demo
 
```
<
 >
```


<pre><code>&lt;
 &gt;
</code></pre>

With tildes:

Example 90

Markdown HTML Demo
 
~~~
<
 >
~~~


<pre><code>&lt;
 &gt;
</code></pre>

Fewer than three backticks is not enough:

Example 91

Markdown HTML Demo
 
``
foo
``


<p><code>foo</code></p>

The closing code fence must use the same character as the opening fence:

Example 92

Markdown HTML Demo
 
```
aaa
~~~
```


<pre><code>aaa
~~~
</code></pre>

Example 93

Markdown HTML Demo
 
~~~
aaa
```
~~~


<pre><code>aaa
```
</code></pre>

The closing code fence must be at least as long as the opening fence:

Example 94

Markdown HTML Demo
 
````
aaa
```
``````


<pre><code>aaa
```
</code></pre>

Example 95

Markdown HTML Demo
 
~~~~
aaa
~~~
~~~~


<pre><code>aaa
~~~
</code></pre>

Unclosed code blocks are closed by the end of the document (or the enclosing block quote (opens new window) or list item (opens new window)):

Example 96

Markdown HTML Demo
 
```


<pre><code></code></pre>

Example 97

Markdown HTML Demo
 
`````

```
aaa


<pre><code>
```
aaa
</code></pre>

Example 98

Markdown HTML Demo
 
> ```
> aaa

bbb


<blockquote>
<pre><code>aaa
</code></pre>
</blockquote>
<p>bbb</p>

A code block can have all empty lines as its content:

Example 99

Markdown HTML Demo
 
```

  
```


<pre><code>
  
</code></pre>

A code block can be empty:

Example 100

Markdown HTML Demo
 
```
```


<pre><code></code></pre>

Fences can be indented. If the opening fence is indented, content lines will have equivalent opening indentation removed, if present:

Example 101

Markdown HTML Demo
 
 ```
 aaa
aaa
```


<pre><code>aaa
aaa
</code></pre>

Example 102

Markdown HTML Demo
 
  ```
aaa
  aaa
aaa
  ```


<pre><code>aaa
aaa
aaa
</code></pre>

Example 103

Markdown HTML Demo
 
   ```
   aaa
    aaa
  aaa
   ```


<pre><code>aaa
 aaa
aaa
</code></pre>

Four spaces indentation produces an indented code block:

Example 104

Markdown HTML Demo
 
    ```
    aaa
    ```


<pre><code>```
aaa
```
</code></pre>

Closing fences may be indented by 0-3 spaces, and their indentation need not match that of the opening fence:

Example 105

Markdown HTML Demo
 
```
aaa
  ```


<pre><code>aaa
</code></pre>

Example 106

Markdown HTML Demo
 
   ```
aaa
  ```


<pre><code>aaa
</code></pre>

This is not a closing fence, because it is indented 4 spaces:

Example 107

Markdown HTML Demo
 
```
aaa
    ```


<pre><code>aaa
    ```
</code></pre>

Code fences (opening and closing) cannot contain internal spaces:

Example 108

Markdown HTML Demo
 
``` ```
aaa


<p><code> </code>
aaa</p>

Example 109

Markdown HTML Demo
 
~~~~~~
aaa
~~~ ~~


<pre><code>aaa
~~~ ~~
</code></pre>

Fenced code blocks can interrupt paragraphs, and can be followed directly by paragraphs, without a blank line between:

Example 110

Markdown HTML Demo
 
foo
```
bar
```
baz


<p>foo</p>
<pre><code>bar
</code></pre>
<p>baz</p>

Other blocks can also occur before and after fenced code blocks without an intervening blank line:

Example 111

Markdown HTML Demo
 
foo
---
~~~
bar
~~~
# baz


<h2>foo</h2>
<pre><code>bar
</code></pre>
<h1>baz</h1>

An info string (opens new window) can be provided after the opening code fence. Although this spec doesn't mandate any particular treatment of the info string, the first word is typically used to specify the language of the code block. In HTML output, the language is normally indicated by adding a class to the code element consisting of language- followed by the language name.

Example 112

Markdown HTML Demo
 
```ruby
def foo(x)
  return 3
end
```


<pre><code class="language-ruby">def foo(x)
  return 3
end
</code></pre>

Example 113

Markdown HTML Demo
 
~~~~    ruby startline=3 $%@#$
def foo(x)
  return 3
end
~~~~~~~


<pre><code class="language-ruby">def foo(x)
  return 3
end
</code></pre>

Example 114

Markdown HTML Demo
 
````;
````


<pre><code class="language-;"></code></pre>

Info strings (opens new window) for backtick code blocks cannot contain backticks:

Example 115

Markdown HTML Demo
 
``` aa ```
foo


<p><code>aa</code>
foo</p>

Info strings (opens new window) for tilde code blocks can contain backticks and tildes:

Example 116

Markdown HTML Demo
 
~~~ aa ``` ~~~
foo
~~~


<pre><code class="language-aa">foo
</code></pre>

Closing code fences cannot have info strings (opens new window):

Example 117

Markdown HTML Demo
 
```
``` aaa
```


<pre><code>``` aaa
</code></pre>